<template>
  <div class="post-area">
    <router-link :to="`/user/${v.xx.uid}`">
      <user-icon
        :src="v.xx.author.headurl"
        :alt="v.xx.author.nickname"
        :size="size"
        style="margin-right: 0.5rem"
      />
    </router-link>

    <div class="area">
      <div class="user-label">
        <div>{{ v.xx.author.nickname }}</div>
        <div class="to-user" v-if="v.xx.to_author != null">
          <div class="to-user-label">回复</div>
          <a class="to-user-name"> {{ '@' + v.xx.to_author.nickname }}</a>
          <div>:</div>
        </div>
      </div>
      <!-- <div class="comments">{{ v.xx.content }}</div> -->
      <MdPreview
        :modelValue="v.xx.content"
        :editorId="`preview-tow-${previewid}`"
      />
      <div class="extra-line">
        <div class="time">{{ v.xx.time }}</div>
        <el-button class="label" link type="primary" @click="readyReply">
          回复
        </el-button>

        <el-button
          class="label"
          @click="delReply(v.xx.id)"
          type="danger"
          link
          v-if="
            (userInfo.state.isLogin && v.xx.uid == userInfo.id) ||
            userInfo.data.isAdmin
          "
        >
          删除
        </el-button>
      </div>
      <div v-if="isReadyReply">
        <el-row :gutter="24">
          <el-col :xs="13" :sm="15" :md="15" :lg="17" :xl="16">
            <el-input
              v-model="comments"
              autosize
              type="textarea"
              :placeholder="`回复${v.xx.author.nickname}`"
            />
          </el-col>
          <el-col :span="3" style="display: flex">
            <el-button @click="readyReply" plain v-if="!set.ismobile">
              取消
            </el-button>
            <el-button
              :loading="isReplying"
              @click="reply"
              :icon="set.ismobile ? '' : 'Edit'"
              type="primary"
              plain
            >
              回复
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import LikeIcon from '@comps/icons/Like.vue'
import { reactive, toRefs } from 'vue'
import { api } from '@/apitypes'
import { ElMessage } from 'element-plus'
import { MdPreview } from 'md-editor-v3'

import Method from '@/globalmethods.ts'
import Cfg from '@/config/config.ts'
import UserRole from '@comps/user/roleList.vue'
import UserIcon from '@comps/user/userIcon.vue'

export default {
  name: 'TowReply',
  components: {
    UserIcon,
    UserRole,
    LikeIcon,
    MdPreview,
  },
  props: ['previewid', 'v', 'size'],
  data() {
    return {
      LikeIcon,
      ...Cfg,
    }
  },
  methods: {
    reply() {
      this.doReply(() => {
        this.$emit('refreshEvent')
      })
    },
    delReply(id: number) {
      Method.api_get(`/bbs/del_reply/${id}`)
        .then((res: any) => {
          let obj = res.data as api
          if (obj.code == 200) {
            ElMessage({
              type: 'success',
              message: obj.msg,
            })
            this.$emit('refreshEvent')
          } else {
            ElMessage({
              type: 'error',
              message: obj.msg,
            })
          }
        })
        .catch(() =>
          ElMessage({
            type: 'error',
            message: '删除失败，可能没做',
          }),
        )
    },
  },
  setup(props) {
    let data = reactive({
      isReadyReply: false,
      comments: '',
      likes: 0,
      isReplying: false,
      isDoGooding: false,
      isLoadingReply: false,
    })
    data.likes = parseInt(props.v.xx.likes)
    function readyReply() {
      data.isReadyReply = !data.isReadyReply
    }
    function doLike() {
      //评论点赞
      if (!data.isDoGooding) {
        data.isDoGooding = true
        Method.api_get(`/bbs/reply_good/${props.v.id}`).then((res: any) => {
          let obj = res.data as api
          data.isDoGooding = false
          data.likes += parseInt(obj.data)
          ElMessage({
            type: obj.code == 200 ? 'success' : 'error',
            message: obj.msg,
          })
        })
      }
    }

    function doReply(callback: any) {
      if (data.comments === '') return ElMessage('评论内容不可为空')
      data.isReplying = true
      let rid = props.v.x.id
      let to_rid = props.v.xx.id
      Method.api_post(`/bbs/reply`, {
        content: data.comments,
        reply_id: rid,
        to_reply_id: to_rid,
      }).then((response) => {
        data.isReplying = false
        if (response.data.code == 200) {
          data.isLoadingReply = true
          data.comments = ''
          data.isReadyReply = false
          if (callback != null) callback()
          ElMessage('回复成功')
        } else {
          ElMessage({
            type: 'error',
            message: `回复失败：${response.data.msg}`,
          })
        }
      })
    }

    return {
      ...toRefs(data),
      readyReply,
      doLike,
      doReply,
    }
  },
}
</script>

<style scoped>
.to-user {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.to-user-name {
  color: #008ac5;
  padding: 0 5px;
  cursor: pointer;
}

.to-user-label {
  padding-left: 10px;
}
</style>
